<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    //点击文本或者内容改变<br>
    <button onclick="this.innerHTML='可恶'">别碰我</button>
    <p onclick="changeText(this)">你好(可以摸）</p>
    <button onclick="changeColor()">点我随机变色</button>
    <button onclick="document.body.style.backgroundColor='rgb(255,255,255)'">点我恢复白色</button>
    <br>
    <p id="para">内联事件示例(点我)</p>
    <p id="btn">通过内联事件改变背景颜色(点我)</p>
    <script>
        function changeText(self) {
            self.innerHTML = "不好(不可以摸)";
        }

        function changeColor() {
            let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
            document.body.style.backgroundColor = color;
        }

        function random(number) {
            return Math.floor(Math.random() * (number + 1));
        }

        //内联事件:
        let para = document.querySelector("#para");
        para.onclick = function() {
                this.innerHTML = "♥♥";
            }
            //当然也可以让para.onclick=一个函数代表事件
        let btn = document.querySelector("#btn");
        btn.onclick = changeColor; //函数不带（），代表事件
        //焦点测试
        function func1(x) {
            x.style.background = 'lightgreen';
        }

        function func2(x) {
            x.style.background = 'coral';
        }
        //onchange事件测试
        function myFunc(x) {
            x.value = "Hello world";
        }
        //onmouseover和onmouseout事件(菜鸟没有 自己编的)
        function mouseon(x) {
            x.innerHTML = "好了你可以拿开了-";
            x.style.color = "red";
        }

        function mouseout(x) {
            x.innerHTML = "鼠标想放我身上吗？";
            x.style.color = "black";
        }
    </script>
    <input type="text" onfocus="func1(this)" onblur="func2(this)">
    <!-- 记得加this -->
    <p>当输入字段获得焦点时,func1()被触发:</p>
    <p>反之则func2()被触发:</p>
    <br>
    <p>接下来是onchange事件测试</p>
    <input type="text" onchange="myFunc(this)" value="Hello"><br>
    <p>接下来是onmouseover和out</p>
    <p onmouseover="mouseon(this)" onmouseout="mouseout(this)">鼠标想放我身上吗？</p>

</body>

</html>